<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>鲜知校园-勾选-辅选</title>
    <link rel="stylesheet" href="/static/front/common/css/reset.css" />
    <link rel="stylesheet" href="/static/front/css/select.css" />
    <link rel="stylesheet" href="/static/front/css/common.css" />
    <link rel="stylesheet" href="/static/layer_mobile/need/layer.css" />
    <script src="/static/front/common/js/jquery-1.12.4.min.js"></script>
    <script src="/static/layer_mobile/layer.js"></script>
    <style>
        .loading {
            display: none;
            position: relative;
            bottom: 2vh;
            width: 100%;
            text-align: center;
            color: #707070;
        }
        .first-loading {
            position: relative;
            top: 30vh;
            width: 100%;
            text-align: center;
            font-size: 4vw;
            color: #707070;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 头部搜索 -->
        <form id="data-form">
            {{.xsrfdata}}
            <input type="hidden" name="id" value="{{.id}}">
            <input type="hidden" name="is_assist" value="1">
            <input type="hidden" id="cur-page" name="p" value="1">
            <div class="searchHeader">
                <div class="select_div">
                    <select name="city_id" id="city">
                        <option value="">选择城市</option>
                        {{range .cityList}}
                            <option value="{{.Id}}" {{if eq $.cityId .Id}}selected{{end}}>{{.Name}}</option>
                        {{end}}
                    </select>
                    <img class="selectIcon" src="/static/front/img/selectIcon.png" alt="">
                </div>
                <div class="search_div">
                    <input type="text" name="name" id="name" value="{{.name}}">
                    <img class="searchIcon" src="/static/front/img/searchIcon.png" alt="">
                </div>
            </div>
        </form>
        <!-- 内容列表 -->
        <div class="content">
            <p class="title">
                辅选:
            </p>
            <ul id="data-list">

            </ul>
        </div>
        <div id="loading" class="loading">玩命加载中...</div>
    </div>
    <form id="next-form" method="post" action="{{urlfor "controllers.PushTimeController.Index"}}">
        {{.xsrfdata}}
        <input type="hidden" name="id" value="{{.id}}">
    </form>
    <form id="select-form">
        {{.xsrfdata}}
        <input type="hidden" id="selected-school-id" name="id" value="">
    </form>
    <!-- 按钮 -->
    <div class="operaBtn">
        <div class="selectNum">
            已勾选
            <p><span id="selected-num">{{.selectedNum}}</span>个</p>
        </div>
        <div class="submit main_submit" id="submit">确 定</div>
    </div>

    {{template "common/bottom-nav.html" .}}

</body>

<script type="text/javascript">

    var canSubmit = true,
        canLoad = true,
        p = 1,
        num = {{.num}},
        selectedNum = {{.selectedNum}},
        maxNum = {{.maxNum}},
        selectedSchoolIds = {{.selectedSchoolIds}};

    function firstLoading(t) {
        $('#loading').removeClass('loading').addClass('first-loading').text(t).show();
    }

    function loading(t) {
        $('#loading').removeClass('first-loading').addClass('loading').text(t).show();
    }

    function loadMore() {

        if (!canSubmit) return false;
        canSubmit = false;
        var curPage = p++;
        $('#cur-page').val(curPage);
        if (curPage == 1) {
            firstLoading('玩命加载中...');
        } else {
            loading('玩命加载中...');
        }

        setTimeout(function () {
            $.ajax({
                url: '{{urlfor "controllers.SchoolController.LoadMore"}}',
                type: 'POST',
                data: $('#data-form').serialize(),
                success: function (res) {

                    canSubmit = true;
                    if ($.trim(res) == "") {
                        canLoad = false;
                        if (curPage == 1) {
                            firstLoading('空空如也');
                        } else {
                            loading('扯不动了，到底了');
                        }
                    } else {
                        $('#loading').hide();
                        $('#data-list').append(res);
                    }

                }
            });
        }, 1000);
    }

    $(function () {

        loadMore();

        $(window).scroll(function () {
            //已经滚动到上面的页面高度
            var scrollTop = $(this).scrollTop();
            //页面高度
            var scrollHeight = $(document).height();
            //浏览器窗口高度
            var windowHeight = $(this).height();
            //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
            if (scrollTop + windowHeight == scrollHeight) {
                if (!canLoad) {
                    return false;
                }
                loadMore();
            }
        });

        $('#city').change(function () {
            $('#data-form').submit();
        });

        $('body').on('click', '.selected', function () {
            var selectedIds = selectedSchoolIds.split(','),
                selectedId = $(this).data('school_id').toString(),
                curNum = $('.isSelected').length;
            if ($(this).hasClass('noSelected')) {
                var index = selectedIds.indexOf(selectedId);
                if (index != -1) {
                    layer.open({content: '您已勾选过此学校，无法再次勾选', skin: 'msg', time: 2});
                    return false;
                }
                if (curNum >= num) {
                    layer.open({content: '此套餐辅选最多选择'+num+'个', skin: 'msg', time: 2});
                    return false;
                }
                $(this).removeClass("noSelected").addClass("isSelected");
                $(this).find("img").attr("src",'/static/front/img/selected.png');
                $('#selected-school-id').val(selectedId);
                doSelect();
            } else {
                $(this).addClass("noSelected").removeClass("isSelected");
                $(this).find("img").attr("src",'/static/front/img/noSelected.png');
                $('#selected-school-id').val(selectedId);
                cancelSelect();
            }
        });

        $('#submit').click(function () {

            if (selectedNum <= 0) {
                layer.open({content: '您没有选择任何学校', skin: 'msg', time: 2});
                return false;
            }

            var html = '';
            if (selectedNum > maxNum) {
                html = `
            <p class="tips">你已勾选${selectedNum}所学校,超过${maxNum}所学校！请重新勾选</p>
            <div class="btn" style="width: 15vw;margin: 0 auto;">
                <div class="againSelect">
                    <img src="/static/front/img/ok.png" style="width: 7vw;">
                </div>
            `
            } else if (selectedNum < maxNum) {
                html = `
                <p class="tips">你已勾选${selectedNum}所学校,不足${maxNum}所学校！是否进行下一步</p>
                <div class="btn" style="width: 40vw;margin: 0 auto;">
                    <div class="cancel">
                        <img src="/static/front/img/cancel.png" style="width: 5vw;">
                    </div>
                    <div class="ok">
                        <img src="/static/front/img/ok.png" style="width: 7vw;">
                    </div>
                </div>
            `
            } else {
                html = `
                <p class="tips">你已勾选${selectedNum}所学校,刚好${maxNum}所学校！是否进行下一步</p>
                <div class="btn" style="width: 40vw;margin: 0 auto;">
                    <div class="cancel">
                        <img src="/static/front/img/cancel.png" style="width: 5vw;">
                    </div>
                    <div class="ok">
                        <img src="/static/front/img/ok.png" style="width: 7vw;">
                    </div>
                </div>
            `
            }
            $('.confirm_content').html(html);
            $('.confirm_tip').show();

        });

    });


    function doSelect() {

        if (!canSubmit) return false;
        canSubmit = false;

        $.ajax({
            url: '{{urlfor "controllers.SchoolController.DoSelect"}}',
            type: 'POST',
            data: $('#select-form').serialize(),
            success: function (res) {
                canSubmit = true;
                selectedNum = res.data;
                $('#selected-num').text(res.data);
            }
        });

    }

    function cancelSelect() {

        if (!canSubmit) return false;
        canSubmit = false;

        $.ajax({
            url: '{{urlfor "controllers.SchoolController.CancelSelect"}}',
            type: 'POST',
            data: $('#select-form').serialize(),
            success: function (res) {
                canSubmit = true;
                selectedNum = res.data;
                $('#selected-num').text(res.data);
            }
        });

    }

</script>

</html>